<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<title>CSS3 动画</title>
    <script src="./prefixfree.js"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}
		
		#timer {
			text-align: center;
			line-height: 1;
			padding: 20px 0;
			font-size: 80px;
			font-family: Arial;
			color: pink;
		}
		
		.box {
			width: 200px;
			height: 200px;
			border-radius: 50%;
			margin: 0 auto;
			background-color: lightgreen;
			animation: change 10s linear forwards;
		}
		
		@keyframes change {
			20% {
				width: 400px;
				height: 400px;
				border-radius: 50%;
			}
			40% {
				background: lightblue;
				border-radius: 50%;
			}
			60% {
				width: 300px;
				height: 300px;
				background: lightyellow;
				border-radius: 50%;
			}
			80% {
				width: 450px;
				height: 450px;
				background: darksalmon;
				border-radius: 50%;
			}
			100% {}
		}
	</style>
</head>

<body>
	<div id="timer">0</div>
	<div class="box"></div>
    
	<script>
		var timer = document.getElementById('timer'),
				end = 0;
		setInterval(function () {
			if(end>=10){
				return;
			}
			timer.innerHTML = ++end;
		}, 1000);
	</script>
</body>

</html>